<script>
export default {
  name: "BookComment",
  props:["id"],
  data(){
    return{
      totalPage:null,
      bookComment:[],
      commentData:{
        u_id:'',
        b_id:"",
        content:"",
        rate:0,
        subtime:''
      },
      showCommentData:{
        b_id:null,
        page:1,
        size:3
      }
    }
  },
  mounted() {
    this.commentData.u_id  = sessionStorage.getItem("u_id");
  },
  watch:{
    id(newVal){
      this.commentData.b_id = newVal
      this.showCommentData.b_id = newVal
      this.showBookComment()
      this.countCommentByBid()
    }
  },
  methods:{
    handleCurrentChange(val) {
      this.commentData.page=val
      this.showBookComment()
    },
    async countCommentByBid() {
      const {data:res} = await this.$axios.get("/bookComment/countCommentByBid", {params: {b_id: this.showCommentData.b_id}})
      if (res.data) {
        this.totalPage = res.data
      }
    },
    async showBookComment() {
      const {data:res} = await this.$axios.get("/bookComment/showBookComment", {
        params: {
          b_id: this.showCommentData.b_id,
          size:this.showCommentData.size,
          page:this.showCommentData.page
        }
      })
      if(res.data){
        this.bookComment = res.data
      }
    },
    async subComment() {
      this.commentData.subtime = new Date()
      const {data: res} = await this.$axios.post("/bookComment/addComment",this.commentData)
      console.log(res)
      if(res.data){
        this.$message.success("评论成功")
        this.commentData.rate=0
        this.commentData.content=''
        await this.showBookComment()
        await this.countCommentByBid()
      }
    }
  },
  filters:{
    formatter(val){
      let date = new Date(val)
      return date.toLocaleString()
    }
  }
}
</script>

<template>
  <div>
    <el-rate
        v-model="commentData.rate"
        show-text>
    </el-rate>
    <el-input
        style="margin: 10px auto"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4}"
        placeholder="请输入内容"
        v-model="commentData.content">
    </el-input>
    <el-button @click="subComment" type="primary">发表评论</el-button>

    <!--    显示评论-->
    <div class="commentList">
      <div style="color: black" class="comment" v-for="comment in bookComment">
        <el-card style="width: 100%;">
          <!--         用户头像-->
          <div  style="display: flex">
            <img style="width: 50px;height: 50px;border-radius: 50%;margin-right: 2%" :src="comment.icon">
            <!--         评论内容-->
            <div>
              <h5>{{comment.u_realname}}</h5>
              <el-rate
                  v-model="comment.rate"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}">
              </el-rate>
              <p>{{comment.subtime|formatter}}</p>
              <p>{{comment.content}}</p>
            </div>
          </div>
        </el-card>
      </div>

      <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="showCommentData.page"
          :page-size="showCommentData.size"
          layout="total,prev, pager, next, jumper"
          :total="totalPage">
      </el-pagination>
    </div>
  </div>
</template>

<style scoped>

</style>